<template>
  <div class="bw-design-node-css-content">
    <div ref="cssEdit" class="bw-css-code-design"></div>
  </div>
</template>

<script lang="ts" setup>
import { useNodeCss } from './util'
const { cssEdit } = useNodeCss()
</script>

<style lang="less" scoped>
.bw-design-node-css-cobtainer {
  width: 100%;
  height: 100%;

  .bw-design-node-css-head {
    height: 35px;
    display: flex;
    padding: 0 8px;
    align-items: center;
    width: calc(100% - 16px);
    justify-content: space-between;
    border-bottom: 1px solid #e8e8e8;

    .head-title {
      font-size: 14px;
      font-weight: 600;
    }

    .bw-extra-icon {
      margin-right: 8px;
    }
  }

  .bw-design-node-css-content {
    width: 100%;
    height: calc(100% - 36px);
    overflow: auto;

    .bw-css-code-design {
      width: 100%;
      height: 100%;
    }
  }
}

.bw-css-design-max {
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  position: fixed;
  background-color: #fff;
  z-index: 1200;
}
</style>
